<!--
 * @Author: WangShuai 1830773767@qq.com
 * @Date: 2025-06-12 22:04:49
 * @LastEditors: WangShuai 1830773767@qq.com
 * @LastEditTime: 2025-06-13 13:52:45
 * @FilePath: \vue3_admin_template\project\src\components\PublicMap\Mapinit.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div id="map"></div>
</template>

<script setup>
import mapboxGl from 'mapbox-gl'
import 'mapbox-gl/dist/mapbox-gl.css'
import { onMounted, ref } from 'vue'
import useMapStore from '@/store/modules/map'
import { baseMapLayer } from '@/utils/MapConfig.ts'
mapboxGl.accessToken = import.meta.env.VITE_MapBox_TOKEN
let useMap = useMapStore()
let baseMapId = ref('')
onMounted(() => {
  initMap()
})
const initMap = () => {
  const style = {
    container: 'map',
    projection: 'globe',
    // style: 'mapbox://styles/mapbox/streets-zh-v1',
    style: {
      version: 8,
      center: [110, 36],
      zoom: 3,
      //   sprite: baseUrlMVT + tilesUrlDC + '/sprites/sprite',
      //   glyphs: baseUrlMVT + tilesUrlDC + '/fonts/{fontstack}/{range}.pbf',
      version: 8,
      sources: {
        tdtImg: baseMapLayer['影像'].map.source.source,
        tdtCia: baseMapLayer['影像'].note.source.source,
        // 'tdtVec':baseMapLayer['经典'].map.source.source,
        // 'tdtCva':baseMapLayer['经典'].note.source.source
      },
      layers: [
        baseMapLayer['影像'].map.layer,
        baseMapLayer['影像'].note.layer,
        // baseMapLayer['经典'].map.layer,
        // baseMapLayer['经典'].note.layer
      ],
    },
    maxZoom: 19.9,
    minZoom: 0.1,
    // dragRotate: false,
    trackResize: true,
    attributionControl: false,
    preserveDrawingBuffer: true,
    renderWorldCopies: true, // 地图不重复
    locale: {
      'NavigationControl.ZoomIn': '放大',
      'NavigationControl.ZoomOut': '缩小',
    },
  }
  //存一份旧的底图，用来进行moverlayer，来当beforeLayer
  baseMapId.value = {
    mapId: baseMapLayer['影像'].map.source.id,
    noteId: baseMapLayer['影像'].note.source.id,
  }

  const map = new mapboxGl.Map(style)
  useMap.setMapFn(map, baseMapId.value)
}
</script>

<style>
* {
  margin: 0;
  padding: 0;
}
#map {
  left: 0;
  top: 0;
  position: absolute;
  width: 100vw;
  height: 100vh;
}
html,
body {
  overflow: hidden;
}
/* 隐藏左下角图标 */
.mapboxgl-ctrl-logo {
  display: none !important;
}
</style>
